<template>
  <div class="contain">
    <div class="order-tit">
      请确认一下订单:
    </div>
    <div class="journey">
      <div class="journeyItem">
        <span class="journeyKey">车型</span>
        <div class="journeyVal">面包车</div>
      </div>
      <div class="journeyItem">
        <span class="journeyKey">用车时间</span>
        <div class="journeyVal">2018-07-21 15:30</div>
      </div>
      <div class="journeyItem">
        <span class="journeyKey">备注</span>
        <div class="journeyVal">无</div>
      </div>
      <div class="journeyItem">
        <span class="journeyKey">始发地</span>
        <div class="journeyVal"><span>海洋大厦</span></div>
      </div>
      <div class="journeyItem">
        <span class="journeyKey">目的地</span>
        <div class="journeyVal"><span>海洋大厦</span></div>
      </div>
    </div>
    <div class="journey">
      <div class="journeyItem">
        <span class="journeyKey">电话</span>
        <div class="journeyVal">18011111111</div>
      </div>
      <div class="journeyItem">
        <span class="journeyKey">优惠券</span>
        <div class="journeyVal"><span>暂无</span><span>已抵扣5元</span></div>
      </div>
      <div class="journeyItem">
        <span class="journeyKey">规格</span>
        <div class="journeyVal">需要搬运、全拆坐</div>
      </div>
      <div class="journeyItem">
        <span class="journeyKey">备注</span>
        <div class="journeyVal"><span>无</span></div>
      </div>
      <div class="my-driver">
        <span class="my-driver-tit">我的司机优先</span>
        <div class="my-driver-check">
          <radio-group  @change="radioChange">
            <label class="radio" v-for="(item,index) in items" :key="index">
              <radio :value="item.name" :checked="item.checked"/>{{item.value}}
            </label>
          </radio-group>
        </div>
      </div>
    </div>
    <div class="order-price">预估价格：<span class="money">60元</span> <span>明细</span></div>
    <div class="order-btn">立即下单</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      driverChang: '司机选择',
      items: [
        {name: 'yes', value: '是', checked: true},
        {name: 'no', value: '否'}
      ],
      checkValue: ''
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '订单确认'
    })
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#192231',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  },
  methods: {
    radioChange (e) {
      console.log('radio发生change事件，携带value值为：', e.mp.detail.value)
    }
  }
}
</script>

<style scoped>
  .contain{
    width: 690rpx;
    padding: 0 30rpx;
  }
.order-tit{
  font-size: 28rpx;
  font-weight: bold;
  color: #182230;
  line-height: 100rpx;
}
  .journey{
    padding-top: 60rpx;
  }
  .journeyItem{
    display: flex;
    font-size: 28rpx;
    height: 70rpx;
  }
  .journeyKey{
    text-align: justify;
    width: 135rpx;
    color: #c2c2c2;
  }
  .journeyKey::after {
    width: 100%;
    height: 0;
    margin: 0;
    display: inline-block;
    overflow: hidden;
    content: '';
  }
  .journeyVal{
    margin-left: 52rpx;
    color: #1a2634;
    margin-bottom: 45rpx;
  }
  .journeyVal span{
    padding-bottom: 15rpx;
  }
  .journeyVal p{
    color: #c2c2c2;
  }
  .my-driver{
    height: 90rpx;
    width: 750rpx;
    margin-left:-30rpx;
    font-size: 28rpx;
    padding-left: 30rpx;
    background-color: #fff5f4;
    color: #c2c2c2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
  }
  .my-driver-check{
    margin-right: 80rpx;
  }
  .radio{
    margin-right: 76rpx;
  }
  .order-price{
    font-size: 28rpx;
    color: #c2c2c2;
    text-align: center;
    padding-top: 68rpx;
  }
  .money{
    color: #ed493d;
    padding: 0 20rpx;
  }
  .order-btn{
    font-size: 28rpx;
    width: 300rpx;
    height: 70rpx;
    background-color: #ed493d;
    line-height: 70rpx;
    color: #fff;
    text-align: center;
    margin: 37rpx auto 0 auto;
    border-radius: 20rpx;
  }
</style>
